Los editores incluido Blogger nos ofrecen la posibilidad de crear listas en nuestras entradas.

Cuando hacemos uso de esa opción nos añade un punto a la izquierda y nuestro listado se ve así:
A ese pequeño punto negro se le conoce por bullet, si una vez realizado el listado con el editor de Blogger hacemos click en la pestaña de Edición de HTML nos encontraríamos con algo así:

<ul>
<li>Amarillo</li>
</ul>
<ul>
<li>Verde</li>
</ul>
<ul>
<li>Naranja</li>
</ul>
<ul>
<li>Azul</li>
</ul>
<ul>
<li>Rojo</li>
</ul>

En realidad de todo ese código para crear una lista nos bastaría con este:

<ul>
<li>Amarillo</li>
<li>Verde</li>
<li>Naranja</li>
<li>Azul</li>
<li>Rojo</li>
</ul>

El resultado sería el mismo:

  • Amarillo
  • Verde
  • Naranja
  • Azul
  • Rojo

También podemos anidar listas, incluir una dentro de otra, y lo hacemos añadiendo la etiqueta <ol> al principio y </ol> al final de la lista.

  1. Colores
    • Amarillo
    • Verde
  2. Números
    • Uno
    • Dos


<ol>
<li>Colores
<ul>
<li>Amarillo</li>
<li>Verde</li>
</ul>
</li>
<li>Números
<ul>
<li>Uno</li>
<li>Dos</li>
</ul>
</li>
</ol>

Que nuestro listado fueran enlaces no sería problema.



<ul>
<li><a href="url-página">Amarillo</a></li>
<li><a href="url-página">Verde</a></li>
<li><a href="url-página">Naranja</a></li>
<li><a href="url-página">Azul</a></li>
<li><a href="url-página">Rojot</a></li>
</ul>

Sin embargo para añadir un listado con bullet en la sidebar podemos hacer uso de CSS y al mismo tiempo añadirle unos estilos.

Si miramos nuestra plantilla en /* Sidebar Content llegaremos a encontrar:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Esa es la parte de los estilos de nuestras listas, podemos personalizarlo de acuerdo a nuestro gusto y necesidad.


Si añadimos una imagen con background-image: url(url-imagen); estamos añadiendo un bullet.

Pero saldría horroroso habría que hacer algo para que no se repita la imagen y de paso ubicarla a la izquierda.
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.2em;

Sería algo así:
.sidebar ul {
list-style-type: none;
padding: 0;
margin:0;
}
.sidebar li {
background-image: url(url-imagen);
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.2em;
}

Con padding-left y background-position asignamos la ubicación del bullet, podemos aumentar o disminuir y mirando en vista previa veremos el resultado.

Los bullets deben tener ser de tamaño pequeño, si la altura fuera mayor a la del texto no sólo no quedaría estéticamente bien sino que sería imposible situarlos junto al texto.
Podéis ver un bonito surtido de bullets en WEBSITEBULLETS una página proporcionada por Blog and Web


RAMPY

Hola, Gema, me parece una aplicación interesante. Y se me ocurre. No existiría posibilidad de añadir más líneas ( tipo subrayado por ejemplo) a la plantilla de entrada al blog. Se puede hacer eso?
Gracias y un beso enorme.
Rampi

Responder
Urbat Wp

Interesante, ¿otra consulta como se añaden tablas en los post? yo me vuelvo loco creandolas en word y luego pegandolas y retocando todo, ya que nunca quedan bien a la 1ª ni a la 2ª.....
un saludo

Responder
Unknown

Graaaaaaaaaaaaaaaaaacias y mil gracias por la ayuda que te habia consultado antes me a funcionada a la perfeccion!!!
Este truquito de los bullets tambien lo voy a probar!

Salutes desde SCI TERROR
H

Responder
Unknown

¡Hola! Quiero felicitarte porque gracias a ti he conseguido "más o menos" personalizar mi blog. No tenía ni idea de cómo hacerlo y de casualidad di con tu blog. ¡Fue mi salvación! Me gustaría que le echaras un vistazo a mi blog y que me dieras tu opinión.
Un saludo

Responder
Gem@

Rampi ¿eres Rampy? da igual era curiosidad :)
Con subrayar te refieres a un texto?
Para subrayar un texto puedes añadir la etiqueta <u> de esta forma:
<u> texto subrayado </u>
Si te refieres a una línea independiente la etiqueta es sencilla y únicamente <hr>
Cada vez que la añades se crea una línea, hasta hace poco en la plantilla de entrada sólo se podía añadir letra bold y cursiva no recuerdo si alguna otra más.
Pero últimamente no he tenido problema de incluir cualquier código o etiqueta ;)

Urbat Wp no es recomendable utilizar Word para añadir más tarde el código en Blogger, lo distorsiona todo incluso añade subrayados a los enlaces sin tenerlo.
Crear una tabla es muy simple:
<table border=1><td>Aqui el contenido de la tabla, enlaces, imágenes, texto, ...</td></table>
Como es lógico hay formas de darle color y crear tablas dobles.
Mira Texto por si te fuera útil ;)

Me alegra que funcionara H ¡que repelús me da tu avatar! :) :) :)

El osito con zapatos nuevos me parece estupenda no sólo por lo original sino por la idea que has tenido. Nos seguimos viendo ;)

Responder
RAMPY

Hola, Gema, sí soy Rampy. Y cómo se hace para añadir eso al cuadro dónde escribes? Si es que se puede añadir?
Gracias y un beso.
Rampi

Responder
Unknown

hola Gema!!! como todavía no llegan tus actualizaciones, pinché en suscripciones y salió obviamente que ya recibía las mismas jajaja...en fin algún día aparecerás de nuevo como por arte de magia.
Me ha encantado esta entrada, no sabía como se hacían los puntitos!!! besitos!!!

Responder
Gem@

¿A qué cuadro Rampy?

Hola Graciela al final como decimos aquí saldré hasta en la sopa :)

Responder
RAMPY

Me refiero al cuadro para publicar post,donde están todos esos botoncitos de negrita, cursiva, "quote", alinear derecha", etc.

Responder
Gem@

En el editor de Blogger se puede añadir si clicas sobre el icono de listas con viñetas, también puedes hacerlo numeradas.
En la primera imagen de esta entrada lo verás coloreado de rojo ;)

Responder
Anónimo

Hola Gem@!

podrías hacer un post sobre cómo colocar en blogger una imagen volando por la pantalla que esté enlazada con algo? me sería muy útil si la imagen en cuestion y el enlace se pudieran personalizar.

Responder
Anónimo

Hola Gema, me podrías decir que usas para conseguir que el listado de tus directorios en el footer se expanda y contraiga de esa forma. Yo tengo una forma de expander y contraer pero no tiene esa ralentizacion que tiene la tuya.
Gracias!!

Responder
Gem@

Silver ¿lo viste en alguna página? pienso, que para que la imagen se desplace por la pantalla debe ser con un script.
Es posible añadir una imagen animada en un lugar determinado de la pantalla, otra cosa es conseguir hacerla volar :)

Hola Eric lo que yo tengo aplicado es un bloque animado la ralentización o tiempo del efecto se consigue con el valor que añadimos y en false.
En el primer ejemplo del enlace que te dejo está puesto a 700, false y para el segundo 100, false. En el footer que es donde lo has visto añadí 300. (a más cantidad el efecto es más lento)

Responder
Unknown

hola gema! seguimos con las preguntas... creia que podria personalizar los ul y los il en el interior de los posts pero no parece funcionar. Tiene toda su logica pero veo que rien de rien... sera por alguna razon?

list-style-type: none;
padding: 0;
margin:0;
}
.post li {
background-image: url(http://img241.imageshack.us/img241/8305/2169321609e2995d7d64ofs4.jpg);
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.2em;
}

Responder
Unknown

bueno, al de arriba le falta la linea:

.post ul {

Responder
Gem@

.post ul {
list-style: none;
margin: 0;
padding-left: 10px;
}
.post li {
font-size: 11px;
list-style-image: url(http://img241.imageshack.us/img241/8305/2169321609e2995d7d64ofs4.jpg);
list-style-position: outside;
list-style-type: none;
margin: 3px 0 3px 20px;
}
;)

Responder
Unknown

gracias. Pues tengo el estilo bien. Es algo en la plantilla que falla ya que en entradas relacionadas funciona. Seguire investigando :)

Responder
Gem@

Quique lo tienes así:
.post ul {
background: url(http://3.bp.blogspot.com/_2b4BDbMqnGU/SVgCKPycAaI/AAAAAAAAGko/_tnmB1Je9ls/s400/120px-Bullet-blue.png);
margin: 0;
padding-left: 10px;
}
.post ul li {
font-size: 11px;
background: url(http://3.bp.blogspot.com/_2b4BDbMqnGU/SVgCKPycAaI/AAAAAAAAGko/_tnmB1Je9ls/s400/120px-Bullet-blue.png);
}
}

Prueba a sustituir todo eso y en su lugar añade como te puse en el otro comentario.
Si modificando lo que te digo no funciona prueba a alojar la imagen en otro sitio.
Ya me dices algo tiene que resultar como sea :)

Responder
Unknown

pues si! mira que lo puse antes y nada! vete a saber que teniamal puesto... jejeje! gracias!!!

Responder
Gem@

Aún te sobra un cierre de los estilos,
esto---> }
;)

Responder
Unknown

no se te escapa ni una!! :)
solucionado, gracias!

Responder
Priamo

Hola Gema,enhorabuena por tu blog y tu inestimable ayuda.
Como veras he creado un gadget desplegable llamado FOROS y dentro de el 3 direcciones web .Quiero poner delante de las 3 direcciones una flecha,rombos etc (una imagen url de esos elemntos).Llevo varios intentos y no logro realizarlo pese que bien que se explica aquí pero me lio con: (Post y sidebar content).Muy agradecido.Mi blog en pruebas es: eltallerdepriamo@blogspot.com

Responder
Priamo

Hola de nuevo.Ya he podido introducir la imagen en el desplegable.Solo una cosa: Me queda demasiado margen por arriba de la primera web y por debajo de la ultima.Como ajustar para que me quede la direccion web + cerca del boton FOROS????
Gracias

Responder
Gem@

Pruebas Priamo no puedo ver lo que me dices no tienes el perfil activado y no puedo ver tu blog :(

Responder
Priamo

Hola Gema le he pinchado en "Compartir mi perfil", supongo que te refieres a eso.Ya está hecho.Mi blog: eltallerdepriamo.blogspot.com

Responder
Gem@

Ahora lo veo perfecto :)
Veamos... añadiste la imagen en .sidebar ul lo que haremos será modificar esa parte vas a quitar esto:
margin:0 0 0;
padding:30px;

y en su lugar añadimos esto:
margin : 0px !important;
padding:0px 0 0 25px;

Ya me dices si lo ves bien ;)

Responder
Priamo

Lo veo perfecto, un placer y gracias.

Por cierto podrias indicarme algun post donde hables de como insertar una imagen e incluirle texto por arriba,abajo, a su derecha o izq. Y al mismo tiempo incluir en el texto alguna direccion de web o incluir otra imagen??
GRACIAS

Responder
Gem@

Pruebas Priamo ahora mismo tengo problemas para copiar y pegar suena tonto pero el PC me va mal en ese sentido y no puedo añadir aquí el enlace de alguna entrada, pero todo lo relacionado con imágenes y fotografías lo puedes encontrar en el menú donde dice "Todo fotos" :)

Responder
Priamo

Hola de nuevo Gema sigo trabajando con mi blog y pregunto:

La distancia entre widgets como la puedo acortar ya que esteticamente quedan demasiado separados entre ellos??.

Además veo sobretodo cuando le pongo fondo al wideget mucha distancia del final del texto o imagen a final del widget, es tema de margenes del widget o me estoy haciendo un lio??

Muchas gracias anticipadas

Responder
Priamo

Gema a tu respuesta del dia 16.01.09 quisiera hacer una nueva pregunta: la flechita me sale en todos los gadgets con listas que creo y quisiera que solo apareciese en algunos Gadgets de la sidebar y no en todos como parece que por defecto ocurre.Un nsaludo

Responder
Gem@

¡Hola! esa flechita es la que tienes añadida en "sidebar ul" como bien dices aparece cada vez que añades un enlace a una lista, para que eso no curra hay que crear los enlaces sin la etiqueta <ul> <li> y </ul> <li> que añadimos en la creación de listas :)
Sobre las otras preguntas que quedaron en el aire ahí van..
Justicar imagen y texto
La distancia entre los gadgets la puedes modificar en:
.sidebar .widget disminuyendo el valor en padding. Yo no los veo separados ahora mismo los tienes como yo lo que ocurre que no tienes líneas que los separen y se ve más espacio.

Responder
Priamo

Lo he probado y perfecto pero para el GADGET llamado "Etiquetas" como soluciono para quitar las flechitas??
Otra cosa que tampoco doy con ella ¿como alíneo a la izquierda el parrafo final de las entradas,me refiero al que dice:Publicado por....y termina con Etiquetas.....??
Y por ultimo como elimino la parte que aparece al final de las entradas y dice:Suscribirse....??
Muchas gracias,amiga

Responder
Gem@

Pensaba que te había contestado, lo siento :(
Esa flechita la tienes añadida de forma que todas las listas que añades le sale la flecha.
El código de las etiquetas dice:
<ul> <li> al principio y </ul> </li> al final.
Prueba a eliminar <ul> y </ul> y mira si se van las flechitas.

Lo de suscribirse creo que ya lo has quitado ;)

Responder
Priamo

Bien Gema, gracias pero ahora los titulos de las etiquetas me salen uno al lado del otro y yo los quiero tipo lista como lo hago???

Te faltó decirme como alineo a la izquierda el parrafo que aparace al final de las entradas y que dice: Publicado por pruebas ....0 comentarios. Etiquetas:Boxes. GRACIAS

Responder
Gem@

Veamos... hay dos formas de hacerlo.
Una es al final de cada línea añadiendo la etiqueta <br> eso genera un salto de línea.
La otra forma es en plantilla de diseño haces click en añadir un elemento de página y escoges añadir etiquetas.
Te las mostrará en forma de listado con un número al lado indicando la cantidad de entradas con dicha etiqueta.

El párrafo de autor, etiquetas, etc... lo puedes modificar en plantilla de diseño.. Entradas del blog|Editar. ahí arrastras las etiquetas y las ordenas a tu gusto ;)

Responder
Martin

Gracias Gema! Me ha servido mucho este post y más el post del "Opinando gerundio de opinar" gracias a este, he podido personalizar mi footer con imagenes y hasta le agregué bullets!!
Puedes echarle una miradita: http://elespaciodemartinivan.blogspot.com/

Responder
Gem@

:: Muy bueno Martin :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top